<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>首页</title>
 <link rel="stylesheet" href="../css/base.css">
 <link rel="stylesheet" href="../css/index.css">
 <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
 <style>
  /* 全局样式设置 */
  html,
  body {
    position: relative;
    height: 100%;
  }
 
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
 
  /* Swiper 组件样式 */
  .swiper {
    width: 100%;
    height: 100%;
  }
 
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
   </style>
</head>

<body>
 <!-- 页面头部 -->
 <div class="header container">
  仿站电商平台
  <p class="off active">您好！<a href="./login.html">请登录</a></p>
  <p class="on ">你好！
   <span class="nickname">用户昵称</span>
   <button class="self">个人中心</button>
   <button class="logout">退出登录</button>
  </p>
 </div>
 <!-- 商品列表链接 -->
 <div class="list container"><a href="./list.html">购买商品</a></div>

 <!-- 图片轮播组件 -->
 <!-- 如需重新渲染新图片,只需渲染#carousel 元素对一个内容即可-->
 <div class="layui-carousel container" id="carousel">
  <div carousel-item>
   <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <!-- 每个轮播项 -->
      <div class="swiper-slide"><img src="../img/img1.jpg"></div>
      <div class="swiper-slide"><img src="../img/img2.jpg"></div>
      <div class="swiper-slide"><img src="../img/img3.jpg"></div>
      <div class="swiper-slide"><img src="../img/img4.jpg"></div>
      <div class="swiper-slide"><img src="../img/img5.jpg"></div>
    </div>
    <!-- 轮播导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
     </div>
  </div>
 </div>

 <!-- 引入外部 JavaScript 文件 -->
 <script src="../js/index.js" type="module"></script>
 <script src="../swiper/swiper-bundle.min.js"></script>
 <script>
     // 初始化 Swiper
     var swiper = new Swiper(".mySwiper", {
       navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
       },
    autoplay:true,
     });
   </script>
</body>

</html>